<template>
	<view class="timeToFill">
		<!-- <fui-input labelWidth="50rpx" v-for="item in fills" textAlign="right" readonly :label="item.name" borderTop>
			<fui-button @click="showSetTime(item.classifyId)" type="success" bold width="100rpx" height="64rpx" :size="28"
				:text="item.num + text"></fui-button>
		</fui-input> -->
		<fui-collapse accordion @change="change">
			<fui-collapse-item :index="index" v-for="(item,index) in fills" :key="index">
				<view class="fui-item__box">
					<!-- <text>{{}}</text> -->
					<fui-text :text="item.name" :size="28"></fui-text>

					<!-- 	<fui-icon @click="onBrowser" style="margin-left: 10rpx;" name="qa" :size="30"
						color="#409EFF"></fui-icon> -->
				</view>
				<template v-slot:content>
					<fui-input labelWidth="50rpx" :value="item.num + text" readonly label="提醒填写时间:" borderTop>
						<fui-button plain color="#2979ff" @click="showSetTime(item.classifyId)" type="success" bold
							width="100rpx" height="64rpx" :size="28" text="修改"></fui-button>
					</fui-input>

					<fui-input v-if="task[index].isEnabled == 1" labelWidth="50rpx" readonly label="状态:" borderTop>
						<fui-button plain color="#2979ff" bold width="100rpx" height="64rpx" :size="28"
							text="启用"></fui-button>
					</fui-input>

					<fui-input v-if="task[index].isEnabled != 1" labelWidth="50rpx" readonly label="状态:" borderTop>
						<fui-button plain color="#fa3534" bold width="100rpx" height="64rpx" :size="28"
							text="禁用"></fui-button>
					</fui-input>

					<fui-input labelWidth="50rpx" :value="task[index].described" readonly label="执行周期:" borderTop>

					</fui-input>
					<!-- <fui-input labelWidth="50rpx" v-model="task[index].cron" readonly label="定时推送配置:" borderTop>
						<fui-button @click="onShowCron(task[index])" background="#909399" bold width="100rpx" height="64rpx"
							:size="28" text="修改"></fui-button>
					</fui-input> -->
					<br />
					<view style="width: 80%; margin: 0 auto;">
						<up-button shape="circle" @click="onShowCron(task[index])" text="设置"></up-button>
					</view>


				</template>
			</fui-collapse-item>

		</fui-collapse>

	</view>
	<view>
		<fui-dialog :show="visible" @click="visible = !visible" title="提示"
			content="定时任务配置请参阅: https://blog.csdn.net/qianlixiaomage/article/details/106599951"
			:buttons="buttons"></fui-dialog>
	</view>
	<view>
		<u-picker @cancel="showTime = !showTime" @confirm="onSetTime" :show="showTime" :columns="columns"></u-picker>
	</view>
	<view>
		<up-modal showCancelButton @close="showCron =!showCron" :show="showCron" @confirm="submittedCron"
			@cancel="showCron =!showCron" :closeOnClickOverlay="true" title="定时推送配置">
			<view style="width: 100%; ">

				<view style="display: flex; justify-content: space-between;">
					<view v-if="cronOps.enab">
						<up-text type="primary" size="18" text="启用"></up-text>
					</view>
					<view v-if="!cronOps.enab">
						<up-text type="error" size="18" text="禁用"></up-text>
					</view>
					<view>
						<up-switch v-model="cronOps.enab" @change="change"></up-switch>
					</view>
				</view>

				<view style="width: 100%;">
					<br />
					<view>
						<up-text size="18" text="执行周期"></up-text>
					</view>
					<view style="width: 100%;">
						<br />
						<up-subsection @change="onSubsectionCron" :list="['每月','每周','每天']"
							:current="current"></up-subsection>
					</view>
					<br />
					<view v-if="current == 0" style="width: 100%; display: flex; justify-content: space-between;">
						<view style="width: 30%;">
							<up-button @click="showDay31 =!showDay31" style="width: 100%;" icon="arrow-down"
								:text=" cronOps.var1 + ' 号'"></up-button>
						</view>

						<view style="60%">
							<up-button @click="showTimes =!showTimes" style="width: 100%;" icon="clock"
								:text="'时间：'+ cronOps.var2"></up-button>
						</view>
					</view>
					<view v-if="current == 1" style="width: 100%; display: flex; justify-content: space-between;">
						<view style="width: 30%;">
							<up-button @click="showDay7 =!showDay7" style="width: 100%;" icon="arrow-down"
								:text="'周 ' + cronOps.var1 "></up-button>
						</view>

						<view style="60%">
							<up-button @click="showTimes =!showTimes" style="width: 100%;" icon="clock"
								:text="'时间：'+ cronOps.var2"></up-button>
						</view>
					</view>
					<view v-if="current == 2" style="width: 100%;">
						<view style="100%">
							<up-button @click="showTimes =!showTimes" style="width: 100%;" icon="clock"
								:text="'时间：'+ cronOps.var2"></up-button>
						</view>
					</view>
					<br />
					<view>
						<view>
							<up-text size="18" :text="cronOps.described"></up-text>
						</view>
						<!-- <view class="">
							<up-input readonly v-model="cronOps.described"  border="surround"
								@change="change"></up-input>
						</view> -->
					</view>
					<!-- <br />
					<view class="">
						<up-button v-if="current == 0" @click="onCron" type="primary" shape text="生成"></up-button>
						<up-button v-if="current == 1" @click="onCron7" type="primary" shape text="生成"></up-button>
						<up-button v-if="current == 2" @click="onCronTime" type="primary" shape text="生成"></up-button>
					</view> -->
				</view>
			</view>

		</up-modal>
	</view>
	<view>
		<up-picker @close="showDay31 =!showDay31" :closeOnClickOverlay="true" @confirm="onCronOps31" title="选择"
			@cancel="showDay31 =!showDay31" :show="showDay31" :columns="columnsDay31"></up-picker>
	</view>
	<view>
		<up-picker :closeOnClickOverlay="true" @confirm="onCronOps7" title="选择" @close="showDay7 =!showDay7"
			@cancel="showDay7 =!showDay7" :show="showDay7" :columns="[[1,2,3,4,5,6,7]]"></up-picker>
	</view>
	<view class="">
		<up-datetime-picker title="时间" @confirm="showTimes =!showTimes" @cancel="showTimes =!showTimes"
			:closeOnClickOverlay="true" ref="datetimePicker" :show="showTimes" v-model="cronOps.var2" mode="time"
			:formatter="formatter" @close="showTimes =!showTimes"></up-datetime-picker>
	</view>
</template>

<script>
	import {
		BASE_IP
	} from '@/common/http/url.js'

	export default {
		name: "timeToFill",
		data() {
			return {
				showDay7: false,
				showTimes: false,
				showDay31: false,
				columnsDay31: [
					[]
				],
				fills: [],
				text: "天",
				classifId: 0,
				showTime: false,
				columns: [
					[1, 7, 14, 30, 360]
				],
				task: "",
				buttons: [{
					text: '确定',
					color: '#409EFF'
				}],
				visible: false,
				showCron: false,
				cron: {
					minutes: "*", //分钟
					hours: "*", //小时
					day: "*", //天
					months: "*", //月
					week: "*", //星期
				},
				current: 0,
				cronOps: {
					id: 0,
					var1: "1",
					var2: "00:00",
					cron: "",
					enab: true,
					described: ""
				}
			}
		},
		methods: {
			submittedCron() {
				let cid = this.current
				if (cid == 0) {
					this.onCron()
				}
				if (cid == 1) {
					this.onCron7()
				}
				if (cid == 2) {
					this.onCronTime()
				}

				uni.showModal({
					title: "提示",
					content: "您确定要修改此配置吗？",
					success: (res) => {
						if (res.confirm) {
							this.showCron = !this.showCron
							let enab = 1
							if (!this.cronOps.enab) {
								enab = 0
							}
							this.isValid(this.cronOps.id, this.cronOps.cron, enab)
						}
					}
				})

			},
			onShowCron(res) {
				console.log(res)
				let cron = res.cron
				let enabled = false
				if (res.isEnabled == 1) {
					enabled = true
				}
				this.cronOps.id = res.id
				this.cronOps.cron = cron
				this.cronOps.enab = enabled
				this.cronOps.described = res.described
				this.showCron = !this.showCron
			},
			onCronOps7(res) {
				this.cronOps.var1 = res.value[0]
				this.showDay7 = !this.showDay7
			},
			onCronTime() {
				let time = this.formatTime(this.cronOps.var2)
				let cron = "0 " + time.var2 + " " + time.var1 + " *" + " * " + "?"
				this.cronOps.cron = cron
				let described = "每天的 " + this.cronOps.var2 + " 执行一次"
				this.cronOps.described = described
			},
			onCron7() {
				let time = this.formatTime(this.cronOps.var2)
				let cron = "0 " + time.var2 + " " + time.var1 + " ?" + " * " + this.cronOps.var1
				let described = "每周的 周" + this.cronOps.var1 + " " + this.cronOps.var2 + " 执行一次"
				this.cronOps.cron = cron
				console.log(described)
				this.cronOps.described = described
			},
			onCron() {
				let time = this.formatTime(this.cronOps.var2)
				let cron = "0 " + time.var2 + " " + time.var1 + " " + this.cronOps.var1 + " * " + "?"
				this.cronOps.cron = cron
				let described = "每月的 " + this.cronOps.var1 + " 号" + " " + this.cronOps.var2 + " 执行一次"
				this.cronOps.described = described
				console.log(described)
			},
			formatTime(time) {
				let hours = time[0] === '0' ? time[1] : time.substring(0, 2);
				let minutes = time[3] === '0' ? time[4] : time.substring(3, 5);
				let newTime = `${hours}:${minutes}`;

				let timeObj = {
					var1: hours,
					var2: minutes
				}
				console.log(timeObj); // 输出: 9:9

				return timeObj
			},
			onCronOps31(res) {
				// console.log(res)
				this.cronOps.var1 = res.value[0]
				this.showDay31 = !this.showDay31
			},
			onColumnsDay31() {
				let number = 31
				for (let i = 1; i <= number; i++) {
					// console.log(i)
					this.columnsDay31[0].push(i)
				}
			},
			onSubsectionCron(res) {
				console.log(res)
				this.cronOps.var1 = 1
				this.current = res
			},
			setTask(id) {
				console.log(id)
				uni.showModal({
					title: "表达式",
					placeholderText: "请输入表达式",
					editable: true,
					success: (res) => {
						if (res.confirm) {
							let value = res.content
							this.isValid(id, value, 1)
						}
					}
				})
			},
			isValid(id, value, enab) {
				console.log("id=======", id)
				console.log("value=======", value)
				let user = uni.getStorageSync("user")
				let url = BASE_IP + "pc/isValid"
				let _this = this
				uni.request({
					url: url,
					method: "GET",
					header: {
						"Authorization": user.token
					},
					data: {
						value: value,
						enab: enab
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							_this.onSetTask(id, value, enab)
						}
						if (res.data.code == 2) {
							uni.showToast({
								title: "表达式有误!",
								icon: "error",
								duration: 3000
							})
							return
						}
					}
				})
			},
			onSetTask(id, value, enab) {
				console.log("id=======", id)
				console.log("value=======", value)
				let user = uni.getStorageSync("user")
				let url = BASE_IP + "pc/task"
				let _this = this
				uni.request({
					url: url,
					method: "POST",
					header: {
						"Authorization": user.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						id: id,
						value: value,
						status: enab,
						described: this.cronOps.described
					},
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							uni.showToast({
								icon: "success",
								title: "修改成功"
							})

							_this.getTask()
						}
						if (res.statusCode == 404) {
							uni.showToast({
								icon: "error",
								title: "修改失败"
							})
						}
						if (res.statusCode == 500) {
							uni.showToast({
								icon: "error",
								title: "修改失败"
							})
						}
					}
				})
			},
			onBrowser() {
				uni.showModal({
					title: "提示",
					content: "定时任务配置请参阅: https://blog.csdn.net/itigoitie/article/details/130047946",
					success: (res) => {
						if (res.confirm) {

							plus.runtime.openURL(
								"https://blog.csdn.net/itigoitie/article/details/130047946",
								// 打开url失败，执行，如打开的是tabao://但是手机没安装，就会执行报错
								function(err) {
									console.log(err);
								}
							);
						}
					}
				})
			},
			showSetTime(num) {
				this.classifId = num
				this.showTime = true
			},
			onSetTime(res) {
				let v = res.value[0]
				// console.log(v)
				let user = uni.getStorageSync("user")
				let url = BASE_IP + "pc/classification/update/" + this.classifId + "/" + user.uuid + "/" + v
				let _this = this
				uni.request({
					url: url,
					method: "POST",
					header: {
						"Authorization": user.token
					},
					success: (res) => {
						// console.log(res)
						// uni.setStorageSync("reminder",res.data)
						if (res.statusCode == 200) {
							uni.showToast({
								icon: "success",
								title: "修改成功"
							})

							setTimeout((res => {
								_this.getUserReminder()
							}), 500)

							setTimeout((res => {
								_this.getUserReminder()
							}), 800)
						}
						if (res.statusCode == 404) {
							uni.showToast({
								icon: "error",
								title: "修改失败"
							})
						}

						if (res.statusCode == 500) {
							uni.showToast({
								icon: "error",
								title: "修改失败"
							})
						}
					}
				})
				this.showTime = false
			},
			getUserReminder() {
				let user = uni.getStorageSync("user")
				let url = BASE_IP + "pc/classification/query/" + user.uuid
				let _this = this
				uni.request({
					url: url,
					header: {
						"Authorization": user.token
					},
					success: (res) => {
						// console.log(res)
						uni.setStorageSync("reminder", res.data)
						_this.fills = res.data
					}
				})
			},
			getTask() {
				let user = uni.getStorageSync("user")
				let url = BASE_IP + "pc/task"
				let _this = this
				uni.request({
					url: url,
					header: {
						"Authorization": user.token
					},
					success: (res) => {
						// console.log(res)
						_this.task = res.data

						_this.task.sort((a, b) => a.id - b.id);
					}
				})
			}
		},
		onLoad() {
			// this.getUserReminder()

			let reminder = uni.getStorageSync("reminder")
			// console.log(reminder)
			if (reminder == "" && reminder == undefined && reminder == null) {
				this.getUserReminder()
				return
			}
			this.fills = reminder
			this.getTask()
			this.onColumnsDay31()
		}
	}
</script>

<style>
	.timeToFill {
		width: 95%;
		margin: auto;
		height: auto;
	}

	.fui-item__box {
		width: 100%;
		padding: 26rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.fui-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
		display: block;
	}

	.fui-descr {
		width: 100%;
		padding: 32rpx;
		font-size: 28rpx;
		line-height: 52rpx;
		color: #7F7F7F;
		word-break: break-all;
		box-sizing: border-box;
	}
</style>